<template>
  <div class="vgrid" v-resize="getTableHeight">
    <VForm
      class="vgrid-form"
      v-bind="formProps"
      :fieldList="fieldList"
      :transformModel="transformModel"
      ref="form"
      @change="handleFormChange"
    >
      <div class="vgrid-form-btns">
        <el-button
          v-bind="btn"
          @click="handleFormBtnClick(btn.key)"
          v-for="btn in formBtns"
          :key="btn.key"
          v-show="isAddBtnShow(btn.url)"
        >
          {{ btn.label }}
        </el-button>
      </div>
    </VForm>
    <div class="vgrid-title" v-if="title">{{ title }}</div>
    <VTable
      class="vgrid-table"
      :id="id"
      v-loading="tableLoading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
      :data="tableData"
      :columnList="columnList"
      v-bind="currentTableConfig"
      v-on="$listeners"
      @handleBtnClick="handleTableBtnClick"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
      ref="table"
    ></VTable>

    <VPagination
      class="vgrid-pagination"
      @currentChange="handleCurrentChange"
      :page="page"
      @sizeChange="handleSizeChange"
      v-bind="paginationConfig"
    ></VPagination>
  </div>
</template>

<script>
import VForm from '@/components/VForm';
import VTable from '@/components/VTable';
import VPagination from '@/components/VPagination';
import { createUUID } from '@/utils/util';
import { btnAuth } from '@/utils/auth';
import formMixin from './form';
import tableListMixin from './table-list';

export default {
  components: {
    VForm,
    VTable,
    VPagination,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    /**
     * 表格数据接口配置
     * {
     *   list: {api: '', resultKey: 'list'}
     * }
     */
    proxy: {
      type: Object,
      required: true,
    },

    /**
     * 表格配置项
     */
    tableConfig: {
      type: Object,
      default() {
        return {};
      },
    },

    /**
     * 表单配置项
     */
    formConfig: {
      type: Object,
      required: true,
    },

    paginationConfig: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mixins: [tableListMixin, formMixin],

  data() {
    return {
      id: createUUID(),
      selectedRows: [],
      tableHeight: 0,
    };
  },
  computed: {
    /**
     * 对外暴露表格引用
     */
    table() {
      return this.$refs.table;
    },

    /**
     * 对外暴露表单引用
     */
    form() {
      return this.$refs.form;
    },

    currentTableConfig() {
      const {
        tableConfig: { props },
        tableHeight,
      } = this;

      if (tableHeight) {
        return {
          ...props,
          maxHeight: tableHeight,
        };
      }
      return {
        ...props,
      };
    },

    columnList() {
      const {
        tableConfig: { columnList },
      } = this;

      return columnList;
    },

    tableApi() {
      const { proxy } = this;

      return proxy;
    },
  },

  methods: {
    isAddBtnShow(url) {
      return btnAuth(url);
    },
    setFormData(key, value) {
      this.form.model[key] = value;

      this._searchParamsCache = { ...this.form.getTransformModel() };
    },
    handleTableBtnClick(key, row, rowIndex) {
      const handlers = {
        delete: () => {
          this.handleDelete(row);
        },
      };
      if (handlers[key]) {
        handlers[key]();
      } else {
        this.$emit('handleTableBtnClick', key, row, rowIndex);
      }
    },
    getTableHeight() {
      const { currentTableConfig } = this;
      const eleTable = this.$refs.table && this.$refs.table.$el;
      const bodyTable = eleTable.querySelector('.el-table__body-wrapper');
      if (eleTable) {
        this.tableHeight = eleTable.offsetHeight;

        // 存在合计行时手动计算高度
        if (currentTableConfig['show-summary'] || currentTableConfig.showSummary) {
          this.$nextTick(() => {
            const headerTableHeight = eleTable.querySelector('.el-table__header-wrapper').offsetHeight;
            const bodyTableHeight = bodyTable.offsetHeight;
            const bodyInnerTableHeight = bodyTable.querySelector('table').offsetHeight;
            const footerTableHeihgt = eleTable.querySelector('.el-table__footer-wrapper').offsetHeight;

            if (
              bodyTableHeight <= bodyInnerTableHeight &&
              // height auto 情况下二次查询.+2是因为可能存在border
              headerTableHeight + bodyTableHeight + footerTableHeihgt + 2 >= this.tableHeight
            ) {
              this.$refs.table.table.layout.setHeight(this.tableHeight);
            } else {
              bodyTable.style.height = 'auto';
            }
          });
        }
        // this.tableHeight = 0;
      }
    },
  },

  mounted() {
    // this.getTableHeight();
    const formModel = this.form.getTransformModel();
    this.searchTableData(formModel);
  },
};
</script>

<style lang="scss" scoped>
.vgrid {
  height: 100%;
  display: flex;
  flex-direction: column;

  &-table {
    flex: 1;
    overflow: hidden;
  }

  &-form,
  &-title,
  &-pagination {
    flex-shrink: 0;
  }
}
</style>
